<template>
	<view class="u-p-t-40 u-p-r-60 u-p-b-30 u-p-l-60 logincontainer">
		<u-avatar size="140" src="/static/user.png" mode="square"></u-avatar>
		<u-form :model="loginModel" ref="form1" class="forms">

			<u-form-item left-icon="account-fill" label-width="auto" label="用户名"><u-input placeholder="请输入账户"
					v-model="loginModel.userName" /></u-form-item>
			<u-form-item left-icon="lock" label-width="auto" label="密码"><u-input placeholder="请输入密码"
					v-model="loginModel.userPassword" /></u-form-item>
			<view class="passtext">
				忘记密码
			</view>

			<u-button :custom-style="customStyle1" @click="toCommit">登录</u-button>
			<u-button :custom-style="customStyle2" @click="toRegister()">注册</u-button>

		</u-form>



	</view>


</template>

<script setup>
	import axios from 'axios';

	import axiosAdapterUniapp from 'axios-adapter-uniapp'

	import {
		reactive,
		ref
	} from 'vue'
	import {loginApi} from '../../api/user.js'
	const loginModel = reactive({
		userName: '',
		userPassword: ''
	})
	const customStyle1 = reactive({
		marginTop: '20px',
		background: '#FF7670',
		color: '#FFF',
		width: '100%'
	})
	const customStyle2 = reactive({
		marginTop: '20px',
		background: '#FF7670',
		color: '#FFF',
		width: '100%'
	})
	//去注册
	const toRegister = () => {
		uni.navigateTo({
			url: '../register/register'
		})
	}

	// //发起请求
	// const add=axios.post('http://localhost:8080/login', {
	//     userName: 'agoni',
	//     userPassword: 'zxy123456'
	// })
	//     .then(function (response) {
	//         console.log("成功了");
	//     })
	//     .catch(function (error) {
	//         console.log(error);
	//     });
	//登录
	const toCommit = async () => {
		if (!loginModel.userName) {
			uni.showToast({
				title: '请输入账号',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		if (!loginModel.userPassword) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		let res = await loginApi(loginModel)
		if (res && res.code == 200) {
			//存储用户id
			console.log(res)
			uni.setStorageSync('id', res.data.id)
			
			//跳转首页
			uni.switchTab({
				url: '../index/index'
			})
		}
	}
</script>

<style lang="scss">
	.logincontainer {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 70px;
		flex-direction: column;

		.forms {
			width: 100%;
		}

		.passtext {
			display: flex;
			justify-content: flex-end;
			color: #FF7670;
			margin-top: 20px;
		}
	}
</style>